<template>
	<!--首页轮播图-->
	<view>
		<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotStyle" field="content">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;height: 200px ;background-color: #eeeeee;" mode="heightFix"
							:src="item.src"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	const info = ref(
		[{
			src: 'https://dimg04.c-ctrip.com/images/0zg721200093zbno71DF2.jpg'
		},{
			src: 'https://msn-img-nos.yiyouliao.com/inforec-20220627-6c054e929ff9b046f08d2a97bc2747f5.jpg?time=1656396268&signature=7C7586B8AC19BEF9A451E2C68FF56520'
		}, {
			src: 'https://msn-img-nos.yiyouliao.com/inforec-20220628-e9ef333d300093fa37c750bac5fa7491.jpg?time=1656397321&signature=2321D9922BA056BF8F4381442575EAA6'
		}])
	const dotStyle = ref({
		backgroundColor: 'rgba(83, 200, 249,0.3)',
		border: '1px rgba(83, 200, 249,0.3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
		selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
	})
	const mode = ref('round')
	const current = ref(0)
	const change = (e) => {
		current.value = e.detail.current;
	}
</script>

<style scoped>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.image {
		width: 200px;
	}
</style>
